import React,{Component} from 'react';
import 'antd/dist/antd.css'
import { Input,Button,List, Typography} from 'antd';
import {connect} from 'react-redux';
import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/ActionCreators';
//UI组件
class ListUI extends Component{
    render(){
        return(
            <React.Fragment>
            {/* <h3>首页
            </h3>
            <Input placeholder="Basic usage" style={{width:'300px'}} onChange={e=>{this.props.handlerChange(e)}}/> <Button type="primary" onClick={e=>{this.props.addItem()}}>Primary</Button>
            <hr/>
          <List
            bordered
            dataSource={this.props.dataSource}
            renderItem={(item,index) => (<List.Item onClick={e=>{this.props.handlerDeleteItem(e,index)}}><Typography.Text mark>[ITEM]</Typography.Text> {item}</List.Item>)}
            style={{width:'500px'}}
          /> */}
          <h3>首页
        </h3>
        <Input placeholder="Basic usage" style={{width:'300px'}} value={this.props.inputValue} onChange={this.props.handlerChange}/> <Button type="primary" onClick={this.props.addItem}>Primary</Button>
        <hr/>
      <List
        bordered
        dataSource={this.props.list}
        renderItem={(item,index) => (<List.Item onClick={()=>{this.props.handlerDeleteItem(index)}}><Typography.Text mark>[ITEM]</Typography.Text> {item}</List.Item>)}
        style={{width:'500px'}}
      />
          </React.Fragment>
        )
    }

}
//将store绑定
const mapStateToProps = (state) => {
  return{
    inputValue:state.inputValue,
    list:state.list
  }
}
const mapDispatchToProps = (dispatch) =>{
  return {
    handlerChange(e){
      console.log(e.target.value);
      var action = getInputChangeAction(e.target.value);
      dispatch(action);
    },
    addItem(){
      var action = getAddItemAction();
      dispatch(action);
    },
    handlerDeleteItem(index){
      var action = getDeleteItemAction(index);
      dispatch(action);
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(ListUI);